<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
</head>
<body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 
<div align="center" style="margin-top:10px;height:25px;margin-left:-88px;">
    <input id="start" type="date" value="2017-01-01"/>
    <button id="getData">查询</button>
</div>
    <div id="main" style="width: 1100px;margin: 0px auto;height:480px;text-align: center;"></div> 
       <script type="text/javascript" src="static/js/echarts.min.js"></script>
       <script type="text/javascript">
       	  // 基于准备好的dom，初始化echarts实例
               var values =[];			
			   var start=null;
			   $(function(){                	
			   	 $.ajax({
			           url:'RegistrFromAll',
			           type:'post',
			           dataType:'json',
			           async:false,
			           data:{'start':start},
			           success:function(v){
		 	           		for(var i=0;i<12;i++){
		 	           			values.push(v[0][""+(i+1)+""]);		 	           	  	
		 	           		}    		    
			           }
			       });
			   	 
			   
			   	$("#getData").click(function(){
			   		var valuess =[];
			   		var start = $('#start').val();
			   		 $.ajax({
			   			 async:true,
			   	      url:'RegistrFromAll',
			   	      type:'post',
			   	      dataType:'json',
			   	      data:{'start':start},
			   	      async:true,
			   	      success:function(a){      
			   	   	  for(var i=0;i<12;i++){
			   	   		  valuess.push(a[0][""+(i+1)+""]);			   	   		  
			   	   	  }			   	   	
			   	   	chart.setOption({ //加载数据图表
			   	   		  series: [			   	   			  
			   	   		         {
			   	   		            name: [],
			   	   		            type: 'bar',
			   	   		            barGap: 0,
			   	   		            label: labelOption,
			   	   		            data: valuess
			   	   		        }      
			   	   		    ]		   					
			   		 		}); 	   	   	 
			   	      }
			   	  });			   		
			   		 chart.setOption(option);
			   	});			   
    var chart = echarts.init(document.getElementById('main'));
        //柱形上的文字        
    var labelOption = {
    normal: {
        show: true,
        formatter:  '{c}',  
      fontSize: 16,
    }
};
option = {
    //柱子颜色
    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    tooltip: {
    	trigger: 'item',
        axisPointer: {
            type: 'shadow',           
        }
    },
    legend: {
        data: []
    },
    //右边提示栏
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
  //时间
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data:['一月份', '二月份', '三月份', '四月份', '五月份','六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    grid: {
        left: 50
    },
    //数据
    series: [
         {
            name: [],
            type: 'bar',
            barGap: 0,
            label: labelOption,
            data: values
        }      
    ]
};
//使用刚指定的配置项和数据显示图表。         
chart.setOption(option);


          
});         
			 


</script> 
</body>
</html>